<style lang="less">
	/*@import './international.less';*/
</style>

<template>
	<div>
		<!--<Checkbox v-bind="checkbox" @click="checkAll(checkbox.value)">全选</Checkbox>-->

		<Row>
			<Table border v-bind="table" ref="table" @on-sort-change="onSortChange" @on-row-dblclick="onRowDblclick" :border="true" :stripe="true"></Table>
		</Row>
		<br>
		<Row type="flex" justify="end">
			<Page v-bind="page" ref="page" @on-page-size-change="onPageSizeChange" @on-change="onPageChange"></Page>
		</Row>
	</div>
</template>

<script>
    // datagrid
    import util from '@/libs/util';
    import Vue from 'vue';

    export default {
        data () {
            return {
                name: 'list',
            }
        },
        methods: {
            onPageSizeChange(e){ // 每页条数改变时
                this.queryParams.pageSize = e;
                this.load();
            },
            onPageChange(e){ // 页数修改时
                this.queryParams.pageNum = e;
                this.load();
            },
            onRowDblclick(obj, index) {
                this.$emit("tableOnRowDblclick", obj, index);
            },
            onSortChange(column){
                let key = column.key;
                let order = column.order;
                this.queryParams.sortNameObj = this.queryParams.sortNameObj || {};
                this.queryParams.sortOrderObj = this.queryParams.sortOrderObj || {};
                this.queryParams.sortNameObj[key] = key;
                this.queryParams.sortOrderObj[key] = order;
                let sortName = "";
                let sortOrder = "";
                for (let k in this.queryParams.sortNameObj) {
                    if (this.queryParams.sortOrderObj[k] === "normal") {
                        continue;
                    }
                    sortName = this.queryParams.sortNameObj[k] + ",";
                    sortOrder = this.queryParams.sortOrderObj[k] + ",";
                }
                if (sortName) {
                    sortName = sortName.substring(0, sortName.length - 1);
                    sortOrder = sortOrder.substring(0, sortOrder.length - 1);
                }
                this.queryParams.sortName = sortName;
                this.queryParams.sortOrder = sortOrder;
                this.load();
            },
            load(url){ // 加载table数据
                this.url = url || this.url;
                util.listSearch({
                    url: this.url,
                    params: this.queryParams,
                    list: this.$props
                });
            }
        },
        props: {
            table: { // table数据
                type: Object,
                default: {}
            },
            page: { // 分页条
                type: Object,
                default: () => ({
                    showSizer: true,
                    showElevator: true,
                    showTotal: true,
                    pageSize: 10
                })
            },
            url: { // table的数据来源地址
                type: String,
                default: ""
            },
            queryParams: { // table的查询条件
                type: Object
            }
        },
        mounted() {
            util.setReactiveField(this.table, 'loading', false);
            this.load(); // 记载数据
        }
    }
</script>